//用户自定义组件
//用户点击编辑按钮组中的自定义按钮时打开自定义组件
Vue.component('comp-popup-button',{
  props:[],
  data : function() {
    return {
      dialogFormVisible:false,
      title:'码单编辑',
      curr:{},
      row:{},
      action:'?controller=Trade_Order&action=Test',//提交数据action
      pageSize:100,
      page_size:100,
      total:100,
      pageNo:1,
      tableData:  [],
      currentPage:1,
      rowset:  [],
      res:  {},
      cache:{},
    };
  },
  template: `
    <el-form 
      ref='ruleForm' 
      @submit.native.prevent>
      <el-dialog 
        :title="title" 
        :visible.sync="dialogFormVisible" 
        custom-class = "popup_button_dialog">
          <el-table
            :data="tableData"
            style="width: 100%;font-size: 10px"
            row-class-name="el-table-tableRow"
          >
              /*1*/
              <el-table-column
                  label="卷号"
                  width="50"
                  height="20"
                  >
                  <template slot-scope="scope"><span>{{scope.$index+(pageNo - 1) * pageSize + 1}} </span></template>
              </el-table-column>

              <el-table-column
                  label="数量"
                  width="100"
                  height="20"
                  >
                  <template slot-scope="scope">
                    <el-input 
                      v-model="res[pageNo][scope.$index+(pageNo - 1) * pageSize + 1].value" 
                      clearable
                      v-if="scope.row.seen"
                      @input="handleModelInput"
                      @change="changeInput(scope.$index+(pageNo - 1) * pageSize + 1, scope.row, $event)" 
                    > </el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.value }}</span>
                  </template>
              </el-table-column>

            
              /*2*/
              <el-table-column
                  label="卷号"
                  width="50"
                  height="20"
                  >
                  <template slot-scope="scope"><span>{{scope.$index+(pageNo - 1) * pageSize + (pageSize/4)+ 1}} </span></template>
              </el-table-column>

              <el-table-column
                  label="数量"
                  width="100"
                  height="20"
                  >
                  <template slot-scope="scope">
                    <el-input 
                      v-model="res[pageNo][scope.$index+(pageNo - 1) * pageSize + (pageSize/4)+1].value" 
                      clearable
                      v-if="scope.row.seen"
                      @input="handleModelInput"
                      @change="changeInput(scope.$index+(pageNo - 1) * pageSize + (pageSize/4)+ 1, scope.row, $event)" 
                    > </el-input>

                    <span style="margin-left: 10px" v-else>{{ scope.row.value }}</span>
                  </template>
              </el-table-column>

              /*3*/
              <el-table-column
                  label="卷号"
                  width="50"
                  height="20"
                  >
                  <template slot-scope="scope"><span>{{scope.$index+(pageNo - 1) * pageSize + (pageSize/2)+ 1}} </span></template>
              </el-table-column>

              <el-table-column
                  label="数量"
                  width="100"
                  height="20"
                  >
                  <template slot-scope="scope">
                    <el-input 
                      v-model="res[pageNo][scope.$index+(pageNo - 1) * pageSize + (pageSize/2)+1].value" 
                      clearable
                      v-if="scope.row.seen"
                      @input="handleModelInput"
                      @change="changeInput(scope.$index+(pageNo - 1) * pageSize + (pageSize/2)+ 1, scope.row, $event)" 
                    > </el-input>

                  </template>
              </el-table-column>

              /*4*/
              <el-table-column
                  label="卷号"
                  width="50"
                  height="20"
                  >
                  <template slot-scope="scope"><span>{{scope.$index+(pageNo - 1) * pageSize + (pageSize*3/4)+ 1}} </span></template>
              </el-table-column>

              <el-table-column
                  label="数量"
                  width="100"
                  height="20"
                  >
                  <template slot-scope="scope">
                    <el-input 
                      v-model="res[pageNo][scope.$index+(pageNo - 1) * pageSize + (pageSize*3/4)+1].value" 
                      clearable
                      v-if="scope.row.seen"
                      @input="handleModelInput"
                      @change="changeInput(scope.$index+(pageNo - 1) * pageSize + (pageSize*3/4)+ 1, scope.row, $event)" 
                    > </el-input>

                  </template>
              </el-table-column>

           
        </el-table>
        
        <div style="float:left; margin-top:5px;padding-right:20px;" >
          <el-button type="success" @click="addOnePage">加一页</el-button>
        </div>  
        <el-pagination 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="pageNo" 
          :page-size="page_size" 
          :total="total"
        ></el-pagination>


        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSelect">确 定</el-button>
          <el-button @click="resetForm('ruleForm')">取 消</el-button>
        </div>

      </el-dialog>
    </el-form>
  `,
  methods:{
    show : function(rr,index) {
      if(typeof(index)!='number') {
        app.row[app.sonKey].every((r,i)=>{
          if(r.id==rr.id) {
            index=i;
            return false;//终止循环,注意必须是every才会终止
          }
          return true;
        });
      }

      this.indexSon = index;
      this.res = [];
     
      if(app.row[app.sonKey][this.indexSon]['madanText']){
        var jsonText = JSON.parse(app.row[app.sonKey][this.indexSon]['madanText']);
        var pageNum = Math.ceil(jsonText.length/this.pageSize);
        this.total = jsonText.length;
        this.pageNo=pageNum;
        this.currentPage=pageNum;
        for (var pN = pageNum; pN > 0; pN--) {
          var dataSon = [];
          for (var i = this.pageSize; i > 0; i--) {
            var cur = this.pageSize*(pN-1)+i;
            dataSon[cur] = {value:jsonText[cur]?jsonText[cur]:''};
          }
          this.$set(this.res, pN, dataSon);
        }
      }else{
        this.total = 100;
        this.pageNo=1;
        this.currentPage=1;
        var currentData = [];
        for (var i = this.pageSize; i > 0; i--) {
          currentData[i] = {value:' '};
        }
        this.$set(this.res, this.pageNo, currentData);
      }
      // this.res[this.pageNo] = currentData;
      this.dialogFormVisible = true;
      this._getRows();
    },
    hide : function() {
      this.dialogFormVisible = false;
    },
    changeInput:function(index, curr, val) {
      // curr.seen=false;
      this.rowset[index] = val;
      // this.cache[this.pageNo] = this.rowset;
      this.cache = this.rowset;
    },
    handleModelInput :function(val){
      // dump(val);
      this.$emit("input", val);
    },
    cellClick:function(curr, column) {
      curr.seen=true;
    },
     //页数改变时触发
    handleSizeChange :function(size) {
      this.currentPage=1;
      this._getRows();
    },

    handleCurrentChange : function(page) {
      this.currentPage=page;
      this.pageNo = page;
      this._getRows();
    },
    addOnePage:function(){
      this.total = this.total+100;
      this.pageNo = this.pageNo+1;

      var currentData = [];
      for (var i = this.pageSize; i > 0; i--) {
        var kk = i+this.pageSize*(this.pageNo-1);
        currentData[kk] = {value:''};
      }
      this.res[this.pageNo] = currentData;
      // this.$set(this.res, this.pageNo, currentData);
    },
    _getRows : function() {
      this.pagesize = this.pagesize;
      this.currentPage = this.currentPage;
    },
    resetForm(formName) {
      // var fields = this.$refs[formName].fields
      // for (var i = 0; i < fields.length; i++) {
      //   if (fields[i].prop === prop) {
      //     // 通过唯一的prop属性值相同来判别是哪个输入框
      //     fields[i].resetField()
      //     break
      //   }
      // }
      // this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },

    handleSelect : function(){ //回调
      this.dialogFormVisible = false;

      var obj = JSON.parse(JSON.stringify(this.cache));

      var arr = Object.keys(obj);

      var temp=[];
      for (var i = arr.length; i >= 0; i--) {
        if(obj[i]==null || typeof(obj[i]) == "undefined") continue;
        temp[i]= obj[i];
      }
      var rr = JSON.stringify(temp);

      app.row[app.sonKey][this.indexSon]['madanText'] = rr;
    },
  },
  mounted:function() {
    for (var i = (this.pageSize/4) - 1; i >= 0; i--) {
      this.tableData[i]={seen:true,value:i};
    }
    var currentData = [];
    for (var i = this.pageSize; i > 0; i--) {
      currentData[i] = {value:''};
    }
    // this.res[this.pageNo] = currentData;
    this.$set(this.res, this.pageNo, currentData);
  },

});

